<template>
  <view class="container">
    <view class="thumb">
      <image :src="info.products.thumbs_text" />
    </view>

    <view class="info">
      <view class="validate">
        <view class="icon">
          <image src="/static/images/validate_active.png"></image>
        </view>
        <view class="txt">
          您查询的产品是官方正品!
          <view>请放心使用！</view>
        </view>
      </view>

      <view class="line"></view>

      <view class="list">
        <view class="item">
          <view class="name"> 查询次数： </view>
          <view class="value"> {{ info.query_num }} </view>
        </view>

        <view class="item">
          <view class="name"> 您查询的防伪码： </view>
          <view class="value"> {{ info.query_code }} </view>
        </view>

        <view class="item">
          <view class="name"> 首次查询时间： </view>
          <view class="value"> {{ info.query_time_text }} </view>
        </view>

        <view class="item">
          <view class="name"> 防伪码所属产品： </view>
          <view class="value"> {{ info.products.name }} </view>
        </view>
      </view>

      <view class="code">
        <image :src="info.query_qrcord_text" />
      </view>
    </view>
  </view>

  <!-- 消息提示 -->
  <uv-toast ref="NoticeRef"></uv-toast>
</template>

<script setup>
// this
const { proxy } = getCurrentInstance();
// 获取用户信息
const business = proxy.$business;
// 防伪码
const code = ref("");
// 商品详情
const info = ref({
  products: {},
});
// 消息提示
const NoticeRef = ref(null);

// 页面加载
onLoad((params) => {
  // 获取并赋值防伪码
  code.value = params?.code ? uni.$uv.trim(params.code) : "";
  // 获取详情数据
  GetInfoData();
});

// 获取详情数据
const GetInfoData = async () => {
  // 组装数据
  const params = {
    code: code.value,
    busid: business.value.id,
  };
  // 发起请求
  const result = await uni.$uv.http.post("/product/info", params);
  // 处理请求结果
  if (result.code === 1) {
    info.value = result.data;
  } else {
    NoticeRef.value.show({
      type: "error",
      message: result.msg,
      // 盗版商品，直接回退到上一页
      complete: () => {
        uni.$uv.route({
          type: "navigateBack",
        });
      },
    });
    return;
  }
};
</script>

<style>
page {
  background-color: #eee;
  padding-bottom: 10px;
}

.container {
  width: 95%;
  margin: 0 auto;
}

.thumb {
  width: 100%;
  height: 280px;
  border-radius: 10px;
  overflow: hidden;
}

.thumb image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 10px;
  padding: 0 10px 10px;
}

.info .validate {
  display: flex;
  align-items: center;
  padding: 10px 0 10px 10px;
}

.info .validate image {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.info .validate .txt {
  font-size: 14px;
}

.info .validate .txt view {
  font-size: 12px;
  color: #9b9b9a;
  margin-top: 5px;
}

.info .line {
  width: 100%;
  height: 1px;
  background: #ebebeb;
  margin: 0 auto;
  margin-bottom: 10px;
}

.info .list .item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 10px;
}

.info .list .item .name {
  color: #9b9b9a;
}

.info .code {
  width: 100%;
  height: 280px;
}

.info .code image {
  width: 100%;
  height: 100%;
}
</style>